<template>
  <div>
    <el-alert
      :title="`数据一共${counts}条`"
      type="info"
      show-icon
      :closable="false"
    >
    </el-alert>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="116">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="111">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="111">
      </el-table-column>
      <el-table-column prop="questionType" label="题型" width="111">
        <template v-slot="{ row }">
          <span v-if="row.questionType == 1">单选</span>
          <span v-else-if="row.questionType == 2">多选</span>
          <span v-else>简单</span>
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="272">
        <template v-slot="{ row }">
          <div v-html="row.question"></div>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="183">
        <template v-slot="{ row }">
          {{ row.addDate | relativeTime }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="111">
        <template v-slot="{ row }">
          <span v-if="row.difficulty == 1">简单</span>
          <span v-else-if="row.difficulty == 2">一般</span>
          <span v-else>困难</span>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="111">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="111">
        <template v-slot="{ row }">
          <span v-if="row.chkState == 0">待审核</span>
          <span v-else-if="row.chkState == 1">已审核</span>
          <span v-else>已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="111">
        <template v-slot="{ row }">
          <div v-html="row.chkRemarks"></div>
        </template>
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="111">
      </el-table-column>
      <el-table-column prop="publishState" label="发布状态" width="111">
        <template v-slot="{ row }">
          <span v-if="row.publishState == 0">下架</span>
          <span v-else>上架</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="272">
        <template v-slot="{ row }">
          <el-button type="text" @click="btnclick(row.id)">预览</el-button>
          <el-button
            type="text"
            :disabled="row.chkState == 0 ? false : true"
            @click="chkStateDialog(row.id)"
            >审核</el-button
          >
          <el-button
            type="text"
            :disabled="row.publishState == 0 ? false : true"
            @click="$router.push({
                  path: '/questions/new',
                  query: {
                    id: row.id
                  }
                })"
            >修改</el-button
          >
          <el-button type="text" @click="publishStateClick(row)">{{
            row.publishState == 0 ? '上架' : '下架'
          }}</el-button>
          <el-button
            type="text"
            :disabled="row.publishState == 0 ? false : true"
            @click="isdelete(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="题目审核"
      :visible.sync="chkStateDialogVisible"
      width="30%"
    >
      <el-radio v-model="chkState" label="1">通过</el-radio>
      <el-radio v-model="chkState" label="2">拒绝</el-radio>
      <el-input
        type="textarea"
        :rows="2"
        placeholder="请输入审核意见"
        v-model="chkRemarks"
        class="textarea"
      >
      </el-input>

      <span slot="footer" class="dialog-footer">
        <el-button @click="chkStateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="chkStateClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { choiceCheck, choicePublish, remove } from '@/api/hmmm/questions'
export default {
  props: {
    counts: {
      type: Number,
      required: true
    },
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chkStateDialogVisible: false,
      chkState: '1',
      chkRemarks: '',
      id: ''
    }
  },
  created() {},
  mounted() {},
  methods: {
    chkStateDialog(id) {
      this.chkStateDialogVisible = true
      this.id = id
    },
    async chkStateClick() {
      if (this.chkRemarks === '') {
        this.$message.warning('请输入审核意见')
      } else {
        try {
          await choiceCheck({
            id: this.id,
            chkState: parseInt(this.chkState),
            chkRemarks: this.chkRemarks
          })
          this.$message.success('审核成功')
          this.chkRemarks = ''
          this.chkStateDialogVisible = false
          this.$emit('updateChkState')
        } catch (err) {
          this.$message.error('审核失败')
        }
      }
    },
    async publishStateClick(row) {
      const confirmResult = await this.$confirm(
        `您确认${row.publishState === 0 ? '上架' : '下架'}这道题目吗?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info(
          `已经取消${row.publishState === 0 ? '上架' : '下架'}`
        )
      }

      try {
        await choicePublish({
          id: row.id,
          publishState: row.publishState === 0 ? 1 : 0
        })
        this.$message.success(`${row.publishState === 0 ? '上架' : '下架'}成功`)
        this.$emit('updateChkState')
      } catch (err) {
        this.$message.error(`${row.publishState === 0 ? '上架' : '下架'}失败`)
      }
    },
    async isdelete(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该题目, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') return this.$message.info('已经取消删除')
      try {
        await remove({ id })
        this.$message.success('删除成功')
        this.$emit('updateChkState')
      } catch (err) {
        this.$message.error('删除失败')
      }
    },
    btnclick(id) {
      this.$emit('btnclick', id)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-table {
  margin: 15px 0;
}
.textarea {
  margin-top: 20px;
}
</style>
